<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <style>
        .hide {
            display: none;
        }
        .pg-header {
            background: url(image/headbg.jpg) repeat-x bottom;
            height: 100px;
        }
        .pg-header .l-header {
            margin-top: 20px;
            text-align: center;
            height: 80px;
            width: 300px;
            float: left;
        }
        .pg-header .r-header {
            line-height: 100px;
            height: 100px;
            width: 800px;
            font-weight: bold;
            font-size: 26px;
            text-align: center;;
            float: left;
        }
        .pg-body .l-body {
            float: left;
            margin-left: 30px;
            margin-top: 20px;
            width: 200px;
            height: 500px;
            background: url(image/headbg.jpg) repeat-y right;
        }
        .pg-body .l-body .menu-title {
            font-size: 20px;
        }
        .pg-body .l-body .menu-title:hover {
            background-color: #636262;
        }
        .pg-body .l-body .menu-list {
            font-size: 16px;
            color: #636262;
        }
        .pg-body .r-body {
            float: left;
            margin-left: 150px;
            margin-top: 20px;
            width: 800px;
            height: 1600px;
        }
        .pg-body .r-body .r-body-button {
            width: 450px;
            height: 45px;
        }
        .pg-body .r-body .r-body-button-icon {
            float: left;
            display: inline-block;
            margin-top: 7px;
            margin-left: 8px;
            width: 50px;
            height: 30px;
            border: 1px dashed gray;
        }
        .pg-body .r-body .r-body-button-new {
            float: right;
            display: inline-block;
            margin-top: 7px;
            margin-left: 8px;
            width: 70px;
            height: 30px;
            border: 1px dashed gray;
        }
        .pg-body .r-body .r-body-table {
            width: 530px;
            height: 1500px;
            border: 1px solid gray;
        }
        .table{
            border-right:1px solid #F00;
            border-bottom:1px solid #F00
        }
        .table-text{
            margin-top:10px;
            text-align: center;
            border-left:1px solid #F00;
            border-top:1px solid #F00
        }
        .button {
            width: 100%;
            height: 100%;
        }
        .go-top{
            position: fixed;
            right:0;
            bottom:0;
            width:50px;
            height:50px;
            background-color: black;
            color: white;
            text-align: center;
            margin-right:10px;
            margin-bottom:10px;
        }
        .new-host-background{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.6;
            z-index: 9;
        }
        .new-host-grid{
            width:450px;
            height:450px;
            position: fixed;
            top:150px;
            left:50%;
            right:50%;
            z-index: 10;
            margin-left:-225px;
            background-color: white;
        }
        .text-grid{
            margin-top:60px;
            margin-left:40px;
        }
        .text-label{
            display: inline-block;
            width:100px;
        }
        .host_button{
            margin-top: 80px;
            margin-left: 150px;
        }
    </style>
</head>
<body>
<div class="pg-header">
    <div class="l-header">
        <img src="image/logo.png"/>
    </div>
    <div class="r-header">
        <div id="r-header" class="header-text">后台管理页面</div>
    </div>
</div>
<div class="pg-body">
    <div class="l-body">
        <dl class="menu">
            <dt class="menu-title" id="mt1" onclick="f2('mt1')">订单中心</dt>
            <dd class="menu-list">我的订单</dd>
            <dd class="menu-list">我的活动</dd>
            <dd class="menu-list">评价晒单</dd>
        </dl>
        <dl class="menu">
            <dt class="menu-title" id="mt2" onclick="f2('mt2')">关注中心</dt>
            <dd class="menu-list">关注的商品</dd>
            <dd class="menu-list">关注的店铺</dd>
            <dd class="menu-list">关注的专辑</dd>
            <dd class="menu-list">关注的内容</dd>
        </dl>
        <dl class="menu">
            <dt class="menu-title" id="mt3" onclick="f2('mt3')">资产中心</dt>
            <dd class="menu-list">小金库</dd>
            <dd class="menu-list">小白条</dd>
            <dd class="menu-list">小白理财</dd>
            <dd class="menu-list">京东卡业务</dd>
        </dl>
        <dl class="menu">
            <dt class="menu-title" id="mt4" onclick="f2('mt4')">特色中心</dt>
            <dd class="menu-list">京东通信</dd>
            <dd class="menu-list">医药服务</dd>
            <dd class="menu-list">黄金托管</dd>
            <dd class="menu-list">装修服务</dd>
        </dl>
    </div>
    <div class="r-body">
        <div class="r-body-button">
            <div class="r-body-button-icon">
                <input onclick="chooseAll()" class="button" type="button" value="全选"/>
            </div>
            <div class="r-body-button-icon">
                <input onclick="cancelAll()" class="button" type="button" value="取消"/>
            </div>
            <div class="r-body-button-icon">
                <input onclick="reverseAll()" class="button" type="button" value="反选"/>
            </div>
            <div class="r-body-button-new">
                <input onclick="new_Host()" class="button" type="button" value="新增主机"/>
            </div>
        </div>
        <div class="r-body-table">
            <table class="table">
                <thead>
                <tr>
                    <th class="table-text" width="100">选择</th>
                    <th class="table-text" width="100">主机名</th>
                    <th class="table-text" width="100">IP地址</th>
                    <th class="table-text" width="100">位置</th>
                    <th class="table-text" width="100">用途</th>
                </tr>
                </thead>
                <tbody>
                <tr class="table-body">
                    <td class="table-text"><input type="checkbox"/></td>
                    <td class="table-text">服务器1</td>
                    <td class="table-text">10.0.1.111</td>
                    <td class="table-text">北京</td>
                    <td class="table-text">生产用</td>
                </tr>
                <tr class="table-body">
                    <td class="table-text"><input type="checkbox"/></td>
                    <td class="table-text">服务器2</td>
                    <td class="table-text">10.0.3.111</td>
                    <td class="table-text">北京</td>
                    <td class="table-text">生产用</td>
                </tr>
                <tr class="table-body">
                    <td class="table-text"><input type="checkbox"/></td>
                    <td class="table-text">服务器3</td>
                    <td class="table-text">10.0.1.11</td>
                    <td class="table-text">北京</td>
                    <td class="table-text">生产用</td>
                </tr>
                <tr class="table-body">
                    <td class="table-text"><input type="checkbox"/></td>
                    <td class="table-text">服务器4</td>
                    <td class="table-text">10.0.1.122</td>
                    <td class="table-text">北京</td>
                    <td class="table-text">生产用</td>
                </tr>
                <tr class="table-body">
                    <td class="table-text"><input type="checkbox"/></td>
                    <td class="table-text">服务器5</td>
                    <td class="table-text">10.0.1.212</td>
                    <td class="table-text">北京</td>
                    <td class="table-text">生产用</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="zhezhaoceng" class="new-host-background hide"></div>
<div id="tanchukuang" class="new-host-grid hide">
        <div class="text-grid">
            <label class="text-label">主机名：</label>
            <input class="text" type="text"/>
        </div>
        <div class="text-grid">
            <label class="text-label">IP地址：</label>
            <input class="text" type="text"/>
        </div>
        <div class="text-grid">
            <label class="text-label">位 置：</label>
            <input class="text" type="text"/>
        </div>
        <div class="text-grid">
            <label class="text-label">用 途：</label>
            <input class="text" type="text"/>
        </div>
        <div class="host_button">
            <input onclick="cancel_Host()" type="button" value="确认" />
            <input onclick="cancel_Host()" type="button" value="取消" />
        </div>
</div>
<div onclick="gotop()" class="go-top">
    GO TOP
</div>
<script>
    function f1() {
        //根据ID获取指定标签的内容，定于局部变量接受
        var tag = document.getElementById('r-header');
        //获取标签内部的内容
        var content = tag.innerText;
        var f = content.charAt(0);
        var l = content.substring(1, content.length);
        var new_content = l + f;
        tag.innerText = new_content;
    }
    setInterval('f1()', 1000);
    function f2(nid) {
        var tag = document.getElementById(nid);
        var tag_list = tag.parentElement.children;
        for (var i = 1; i < tag_list.length; i++) {
            if (tag_list[i].classList.contains('hide')) {
                tag_list[i].classList.remove('hide');
            }
            else {
                tag_list[i].classList.add('hide');
            }
        }

    }
    function chooseAll() {
        var table_list = document.getElementsByClassName('table-body');
        for (i=0;i<table_list.length;i++){
            var checkbox = table_list[i].children[0].children[0];
            checkbox.checked = true;
        }
    }
    function cancelAll() {
        var table_list = document.getElementsByClassName('table-body');
        for (i=0;i<table_list.length;i++){
            var checkbox = table_list[i].children[0].children[0];
            checkbox.checked = false;
        }
    }
    function reverseAll() {
        var table_list = document.getElementsByClassName('table-body');
        for (i=0;i<table_list.length;i++){
            var checkbox = table_list[i].children[0].children[0];
            if (checkbox.checked){
                checkbox.checked = false;}
            else {
                checkbox.checked = true;}
        }
    }
    function new_Host() {
        document.getElementById('zhezhaoceng').classList.remove('hide');
        document.getElementById('tanchukuang').classList.remove('hide');
    }
    function cancel_Host() {
        document.getElementById('zhezhaoceng').classList.add('hide');
        document.getElementById('tanchukuang').classList.add('hide');
    }
    function gotop() {
        document.body.scrollTop = 0;
    }
</script>
</body>
</html>